<template>
  <div class="user-detail">
    <div class="user-detail-top">基本信息</div>
    <div class="user-detail-group">
      <div class="user-icon">
        <span>头像</span>
        <el-upload
          class="avatar-uploader"
          :before-upload="handleAvatarChange"
        >
          <img  :src="user_avatar_imgUrl" class=" avatar-uploader avatar">

        </el-upload>
      </div>
      <div class="user-item">
        <span>手机</span>
        <span>{{ user_phone || "暂未设置" }}</span>
      </div>
      <div class="user-item">
        <span>ID</span>
        <span>{{user_id}}</span>
      </div>
      <div class="user-item">
        <span>昵称</span>
        <el-input
          type="text"
          placeholder="请输入内容"
          v-model="user_nickname"
          maxlength="20"
          show-word-limit
          clearable
          style="width:220px"
        >
        </el-input>
      </div>

      <div class="user-item">
        <span>个性签名</span>
        <el-input
          type="text"
          placeholder="请输入内容"
          v-model="user_sign"
          maxlength="30"
          show-word-limit
          clearable
          style="width:220px"
        >
        </el-input>
      </div>

      <el-button type="danger" @click="edit_userInfo">保存</el-button>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {changeUserInfo} from './../../../api/index'
  import qs from 'qs';
  import axios from 'axios'
const BASE_URL = 'http://127.0.0.1:8886';

  export default {
    data() {
      return {
        user_sign: '',//签名
        user_id: '',//账号
        user_nickname: '',//昵称
        user_phone: '',//手机号
        user_avatar_imgUrl: '',//头像
        user_avatar_id: ''//头像

      }
    },
     mounted(){
       if(window.localStorage.getItem('token').length == 64)
       {
         axios.post(BASE_URL +'/user/get_user_info',
           qs.stringify({token:window.localStorage.getItem('token')}),
           {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
           .then(re =>{
             console.log(re.data.备注)
             if(re.data.状态码 === 200)
             {

               this.user_id=re.data.id;
               this.user_nickname=re.data.昵称;
               this.user_phone=re.data.手机号;
               this.user_sign=re.data.签名;
               this.user_avatar_id=re.data.头像;
               this.user_avatar_imgUrl=this.get_image(re.data.头像);
               console.log(this.userInfo.id);
             }
             else
             {

             }
           })
           .catch((error =>{
             console.log(error)
           }))
       }

    },
    computed: {
      ...mapState(["userInfo"])
    },
    methods:{

      edit_ok() { //取消模态框
        this.$alert('保存成功', '提示', {
          confirmButtonText: '确定',
          callback: action => {

          } });
      },
      handleAvatarChange(file){


        let ff = new FormData();
        ff.append("uploadedfile",file);

        axios.post(BASE_URL+'/images/up',ff,
          {'headers': {'Content-Type': 'multipart/form-data'},
            onUploadProgress: progressEvent => {
              //this.press = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%';
             // if((progressEvent.loaded / progressEvent.total * 100 | 0) ==100)
                //this.image_url='static/loading.jpg';

            }})
          .then(re => {
           // this.inst.close();



            this.user_avatar_imgUrl=re.data.small;
            console.log(re.data);
            this.user_avatar_id=re.data.id;
          })
          .catch(err=>{
            //this.inst.close();
           //mdui.default.alert("网络错误");

          });




      },
      get_image(id)//获取jpg
      {
        return BASE_URL+"/images/small/"+id+".jpg";
      },
      // 修改用户信息
      edit_userInfo(){
        console.log("1");
        if(window.localStorage.getItem('token').length == 64)
        {
          axios.post(BASE_URL +'/user/change_user_info',
            qs.stringify({token:window.localStorage.getItem('token'),name:this.user_nickname,
              sign:this.user_sign, image_url:this.user_avatar_id}),
            {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then(re =>{
              console.log(re.data.备注)
              if(re.data.状态码 === 200)
              {
                this.edit_ok();
              }
              else
              {

              }
            })
            .catch((error =>{
              console.log(error)
            }))
        }
      }
    },
  }
</script>

<style scoped>
  .user-detail{
    width: 70%;
    height: 100%;
    margin: 20px auto;
  }
  .user-detail-top{
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 10px;
    font-weight: bold;
  }
  .user-detail-group .user-icon{
    height: 60px;
    padding: 0 10px;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;

    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .user-detail-group .user-item{
    height: 50px;
    padding: 0 10px;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .user-detail-group input{
    border: 1px solid #ccc;
    outline: none;
    text-align: right;
    width: 200px;
  }
  .user-detail-group button{
    margin: 60px 0;
    width: 15%;
    font-size: 16px;
    border-radius: 10px;
    border: none;
    outline: none;
  }
  .right-title-color{
    color: #999;
    font-size: 14px;
  }
  .avatar-uploader{
    position: relative;
    width: 56px;
    height: 56px;
  }
  .avatar-uploader /deep/ .el-upload.el-upload--text {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 28px;
    color: #8c939d;
    width: 100%;;
    height: 100%;
    line-height: 56px;
    text-align: center;
    opacity: 0;
  }
  .avatar-uploader-icon:hover{
    opacity: 1;
  }
  .avatar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
</style>

